<template>
  <div class="carousel-container">
    <div class="carousel">
      <div class="carousel-inner" :style="{ transform: `translateX(-${currentBannerIndex * 100}%)` }">
        <div class="carousel-item" v-for="(banner, index) in banners" :key="index">
          <img :src="banner.img" alt="社团活动轮播图" class="banner-image" />
          <div class="banner-text">
            <h3>{{ banner.title }}</h3>
            <p>{{ banner.desc }}</p>
          </div>
        </div>
      </div>
      <button class="carousel-control prev" @click="prevBanner">❮</button>
      <button class="carousel-control next" @click="nextBanner">❯</button>
    </div>
    <div class="carousel-dots">
      <span 
        v-for="(banner, index) in banners" 
        :key="index" 
        :class="{ active: currentBannerIndex === index }"
        @click="switchBanner(index)"
      ></span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import banner1 from '@/assets/dubbing/配音秀.jpg';
import banner2 from '@/assets/迎新晚会.jpg';
import banner3 from '@/assets/主持人.jpg';

const banners = [
  {
    img: banner1,
    title: "声韵东软 星耀华章",
    desc: "东软首届校园配音秀大赛，广播台全程参与策划与主持"
  },
  {
    img: banner2,
    title: "迎新晚会",
    desc: "欢迎新同学的大型文艺晚会，展现主持风采"
  },
  {
    img: banner3,
    title: "校园主持人选拔",
    desc: "挖掘校园优秀主持人才，培养专业播音主持能力"
  }
];

const currentBannerIndex = ref(0);
let timer = null;

const switchBanner = (index) => {
  currentBannerIndex.value = index;
};

const prevBanner = () => {
  currentBannerIndex.value = (currentBannerIndex.value - 1 + banners.length) % banners.length;
};

const nextBanner = () => {
  currentBannerIndex.value = (currentBannerIndex.value + 1) % banners.length;
};

const startCarousel = () => {
  timer = setInterval(() => {
    nextBanner();
  }, 5000);
};

onMounted(() => {
  startCarousel();
});

onUnmounted(() => {
  if (timer) clearInterval(timer);
});
</script>

<style scoped>
.carousel-container {
  width: 100%;
  position: relative;
  margin: 0;
  overflow: hidden;
}

.carousel {
  display: flex;
  width: 100%;
  /* 16:10比例设置，宽度100%的情况下，高度为宽度的62.5% (10/16) */
  height: 62.5vw;
  /* 设置最大高度限制，防止在超大屏幕上过高 */
  max-height: 600px;
  position: relative;
  overflow: hidden;
}

.carousel-inner {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
  height: 100%;
}

.carousel-item {
  min-width: 100%;
  height: 100%;
  position: relative;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例并覆盖整个容器 */
}

.banner-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
}

.banner-text h3 {
  font-size: 1.5rem;
  margin: 0 0 10px 0;
}

.banner-text p {
  font-size: 1rem;
  margin: 0;
  opacity: 0.9;
}

.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  z-index: 10;
  justify-content: center;
  width: fit-content;
}

.carousel-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.3s;
}

.carousel-dots span.active {
  background-color: #4CAF50;
  transform: scale(1.2);
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.carousel-control.prev {
  left: 20px;
}

.carousel-control.next {
  right: 20px;
}

.carousel-control:hover {
  background-color: rgba(0, 0, 0, 0.6);
  transform: translateY(-50%) scale(1.1);
}

@media (max-width: 600px) {
  .carousel {
    /* 在小屏幕上保持16:10比例，但可以适当降低最大高度 */
    max-height: 300px;
  }
  
  .banner-text {
    padding: 20px;
  }
  
  .banner-text h3 {
    font-size: 1.2rem;
  }
}
</style>
